<template>
  <n-card 
    class="feature-card" 
    :bordered="false"
    :class="{ 'card-hover': clickable }"
    @click="handleCardClick"
  >
    <div class="card-header">
      <div class="title-wrapper">
        <h3 class="card-title">{{ feature.title }}</h3>
        <status-badge :status="feature.status" />
      </div>
      <div class="meta-info">
        <span class="date">{{ formatDate(feature.create_time) }}</span>
        <span class="author">{{ feature.custom_name ? feature.custom_name : feature.user_name }}</span>
      </div>
    </div>
    
    <div class="card-body">
      <p class="description">{{ formatDescription(feature.description) }}</p>
      
      <div v-if="feature.status >= 3" class="progress-section">
        <div class="progress-label">
          <span>开发进度</span>
          <span>{{ feature.progress }}%</span>
        </div>
        <n-progress 
          type="line" 
          :percentage="feature.progress" 
          :height="8"
          :color="progressColor"
          :rail-style="{ background: '#f5f5f5' }"
        />
      </div>
    </div>
    
    <div class="card-footer">
      <div class="votes-section">
        <n-button 
          size="small" 
          :disabled="feature.has_voted || disabled" 
          :type="feature.has_voted ? 'primary' : 'default'"
          ghost
          @click.stop="handleVote"
        >
          <template #icon>
            <n-icon>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                <path fill="currentColor" d="M13.12 2.06L7.58 7.6c-.37.37-.58.88-.58 1.41V19c0 1.1.9 2 2 2h9c.8 0 1.52-.48 1.84-1.21l3.26-7.61C23.94 10.2 22.49 8 20.34 8h-5.65l.95-4.58c.1-.5-.05-1.01-.41-1.37-.59-.58-1.53-.58-2.11.01zM3 21c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2s-2 .9-2 2v8c0 1.1.9 2 2 2z"/>
              </svg>
            </n-icon>
          </template>
          {{ feature.votes_count }} 投票
        </n-button>
      </div>
      
      <n-button 
        size="small" 
        type="primary" 
        text 
        @click.stop="viewDetail"
      >
        查看详情
        <template #icon>
          <n-icon>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
              <path fill="currentColor" d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.41z"/>
            </svg>
          </n-icon>
        </template>
      </n-button>
    </div>
  </n-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import { NCard, NProgress, NButton, NIcon } from 'naive-ui';
import { FeatureRequest } from '@/api/types/feature';
import { voteFeatureRequest } from '@/api/feature';
import StatusBadge from './StatusBadge.vue';

const props = defineProps({
  feature: {
    type: Object as () => FeatureRequest,
    required: true
  },
  clickable: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['vote']);
const router = useRouter();
const message = useMessage();

// 根据进度计算进度条颜色
const progressColor = computed(() => {
  const progress = props.feature.progress || 0;
  if (progress < 30) return '#f56c6c';  // 红色
  if (progress < 70) return '#e6a23c';  // 橙色
  return '#67c23a';                     // 绿色
});

// 处理卡片点击
const handleCardClick = () => {
  if (props.clickable) {
    viewDetail();
  }
};

// 查看详情
const viewDetail = () => {
  router.push({
    name: 'feature-detail',
    params: { id: props.feature.id }
  });
};

// 处理投票
const handleVote = async (event: Event) => {
  event.stopPropagation();
  
  if (props.feature.has_voted || props.disabled) {
    return;
  }
  
  try {
    const response = await voteFeatureRequest(props.feature.id);
    
    if (response.code === 1) {
      message.success('投票成功');
      emit('vote', props.feature.id);
    } else {
      message.error(response.msg || '投票失败');
    }
  } catch (error) {
    console.error('投票失败:', error);
    message.error('投票失败，请稍后重试'+error);
  }
};

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  const now = new Date();
  const diffTime = now.getTime() - date.getTime();
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
  
  if (diffDays === 0) {
    return '今天';
  } else if (diffDays === 1) {
    return '昨天';
  } else if (diffDays < 7) {
    return `${diffDays}天前`;
  } else {
    return date.toLocaleDateString('zh-CN', { 
      year: 'numeric', 
      month: 'short', 
      day: 'numeric' 
    });
  }
};

// 格式化描述，截断过长的描述
const formatDescription = (description: string) => {
  if (!description) return '';
  
  // 截取前100个字符，如果超过则添加省略号
  const maxLength = 100;
  if (description.length > maxLength) {
    return description.substring(0, maxLength) + '...';
  }
  
  return description;
};
</script>

<style scoped>
.feature-card {
  margin-bottom: 16px;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.card-header {
  margin-bottom: 12px;
}

.title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--n-text-color-1);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-info {
  display: flex;
  font-size: 12px;
  color: var(--n-text-color-3);
}

.date {
  margin-right: 12px;
}

.card-body {
  margin-bottom: 16px;
}

.description {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--n-text-color-2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.progress-section {
  margin-top: 12px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #606266;
  margin-bottom: 4px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.votes-section {
  display: flex;
  align-items: center;
}
</style> 